import * as React from 'react'; import { CheckboxField, Flex, View } from '@aws-amplify/ui-react'; export const CheckboxFieldIndeterminateExample = () => { const [checkedItems, setCheckedItems] = React.useState([false, false]); const checkedItemsRef = React.useRef(null); const allChecked = checkedItems.every(Boolean); const isIndeterminate = checkedItems.some(Boolean) && !allChecked; if (isIndeterminate) { checkedItemsRef.current = [...checkedItems]; } const handleAllPetsChange = () => { if (isIndeterminate) { setCheckedItems([true, true]); } else if (allChecked) { setCheckedItems([false, false]); } else if (checkedItemsRef.current) { setCheckedItems(checkedItemsRef.current); } else { setCheckedItems([true, true]); } }; const handleCatChange = (e) => { const newCheckedItems = [e.target.checked, checkedItems[1]]; if (!newCheckedItems.some(Boolean) || newCheckedItems.every(Boolean)) { checkedItemsRef.current = null; } setCheckedItems(newCheckedItems); }; const handleDogChange = (e) => { const newCheckedItems = [checkedItems[0], e.target.checked]; if (!newCheckedItems.some(Boolean) || newCheckedItems.every(Boolean)) { checkedItemsRef.current = null; } setCheckedItems(newCheckedItems); }; return ( <Flex direction="column" gap="0"> <CheckboxField name="all-pets" label="All Pets" value="allPets" checked={allChecked} isIndeterminate={isIndeterminate} onChange={handleAllPetsChange} /> <View paddingLeft="25px"> <CheckboxField name="cat" label="Cat" value="cat" checked={checkedItems[0]} onChange={handleCatChange} /> <CheckboxField name="dog" label="Dog" value="dog" checked={checkedItems[1]} onChange={handleDogChange} /> </View> </Flex> ); };